<!doctype html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

    <title>vaadin-grid</title>

    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="../all-imports.html">
    <link rel="import" href="../demo/x-data-provider.html">

    <style>
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
      }

      body {
        display: flex;
        flex-direction: column;
      }

      main {
        flex: auto;
        display: flex;
        flex-direction: column;
      }

      header,
      footer,
      aside {
        background: #eee;
        padding: 2em;
      }

      aside {
        background: #ddd;
      }

      @media (min-width: 901px) {

        /* On wide viewports, <aside> is a sidebar */

        main {
          flex-direction: row;
        }

        aside {
          width: 15em;
        }
      }
    </style>
  </head>
  <body unresolved>

    <header>Header</header>

    <main>

      <vaadin-grid items='[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]'>
        <vaadin-grid-column frozen><template class="header">foo</template><template>[[item]]</template></vaadin-grid-column>
        <vaadin-grid-column frozen><template class="header">foo</template><template>[[item]]</template></vaadin-grid-column>
        <vaadin-grid-column><template class="header">foo</template><template>[[item]]</template></vaadin-grid-column>
        <vaadin-grid-column><template class="header">foo</template><template>[[item]]</template></vaadin-grid-column>
        <vaadin-grid-column><template class="header">foo</template><template>[[item]]</template></vaadin-grid-column>
        <vaadin-grid-column><template class="header">foo</template><template>[[item]]</template></vaadin-grid-column>
        <vaadin-grid-column><template class="header">foo</template><template>[[item]]</template></vaadin-grid-column>
        <vaadin-grid-column><template class="header">foo</template><template>[[item]]</template></vaadin-grid-column>
        <vaadin-grid-column><template class="header">foo</template><template>[[item]]</template></vaadin-grid-column>
        <vaadin-grid-column><template class="header">foo</template><template>[[item]]</template></vaadin-grid-column>
      </vaadin-grid>

      <aside>
        <h3>Side note</h3>
        <p>Consectetur nihil eaque quidem nobis blanditiis. Soluta consectetur nesciunt vero vel consequatur Laboriosam sed itaque harum provident quo? Velit magnam dolorem temporibus fugit inventore Quasi inventore aperiam cum totam ipsam?</p>
      </aside>
    </main>

    <footer>Footer</footer>

  </body>

</html>
